<template>
  <div class="preview">
    <div class="img-box" :style="{ backgroundImage: `url(${actPic})` }"></div>
    <div class="tab-box">
      <i class="el-icon-caret-left" @click="prev"></i>
      <div class="tab-item-box">
        <ul :style="{ transform: `translateX(${offset}px)` }">
          <div
            class="tab-item"
            v-for="(el, idx) in dataList"
            @click="changeTab(idx)"
            :class="{ activeTab: idx == tabActivIndex }"
            :key="el"
            :style="{ backgroundImage: `url(${el})` }"
          ></div>
        </ul>
      </div>
      <i class="el-icon-caret-right" @click="next"></i>
    </div>
    <!-- 优化: 放大镜 -->
  </div>
</template>

<script>
export default {
  props: {
    dataList: Array,
  },
  data() {
    return {
      tabActivIndex: 0,
      offset: 0,
    };
  },
  computed: {
    actPic() {
      return this.dataList[this.tabActivIndex];
    },
  },
  methods: {
    changeTab(idx) {
      this.tabActivIndex = idx;
    },
    prev() {
      if (this.offset == 0) return;
      this.offset += 97;
    },
    next() {
      //   减去页面可显示数量, 算出阈值
      //   console.log((this.dataList.length - 4) * -97);
      if (this.offset <= (this.dataList.length - 4) * -97) return;
      this.offset -= 97;
    },
  },
};
</script>

<style lang="scss" scoped>
.preview {
  // 组件宽高100%, 外部容器决定组件大小
  width: 100%;
  height: 100%;

  .img-box {
    height: 80%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .tab-box {
    height: 20%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
    i {
      width: 20px;
      height: 80%;
      line-height: 60px;
      display: block;
      transition: all 0.3s;
      cursor: pointer;
      z-index: 9;
      &:hover {
        background: gainsboro;
      }
    }
    .tab-item-box {
      width: calc(100% - 40px);
      height: 100%;
      font-size: 0;

      //   display: flex;
      //   align-items: center;
      //   flex-wrap: nowrap;
      ul {
        height: 100%;
        white-space: nowrap;
        transition: all 0.2s;
        .tab-item {
          display: inline-block;
          // width: calc(100% / 4);
          width: 97px;
          height: 100%;
          // min-width: calc(100% / 5);
          //   min-height: 90px;
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
        }
      }
    }
    .activeTab {
      border: 3px solid red !important;
      background-size: 120% !important;
    }
  }
}
</style>